<!--具体分类下的导航组件-->

<template>
    <!-- 【:class="{open:show}】 是vue语法，动态绑定class  当show == true时，编译后会将open作为一个 class属性的值 -->
    <div class="nav" :class="{open:show}">
        <ul>
            <!-- 商品 -->
            <li v-for="item in children" :key="item.id" @click="show = !show">
                <router-link :to="`/category/sub/${item.id}`">
                    <img :src="item.picture" alt=""/>
                    <p>{{ item.name }}</p>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default{
    name: 'AppHeaderNav',
    data() {
        return {
            show: false,
        };
    },
    props: ['children'],
}
</script>

<style lang="less" scoped>

.open {
    height: 132px !important;
    /* !important 提高样式优先级*/
    opacity: 1 !important;
}
.nav{
    width: 1240px;
    background-color: #fff;
    position: absolute;
    top: 90px;
    z-index: 599;
    overflow: hidden;
    opacity: 0;
    left: 0px;
    height: 0;
    box-shadow:0 0 5px 0 #ccc;
    /*
        0.1s 是延迟时间开始过渡
        0.2s 是过渡时间
    */
    transition: all 0.2s 0.1s;

    ul{
        display: flex;
        flex-wrap: wrap;
        padding: 0 70px;
        align-items: center;
        height: 132px;

        li{
            width: 110px;
            text-align: center;
            a{
                img{
                    width: 60px;
                    height: 60px;
                }

                p{
                    padding-top: 10px;
                }
            }
        }
    }
}
</style>